<template>
  <div class="view">
    <Panel title="课程列表">
      <div slot="header">
        <el-input
          v-model="keyword"
          prefix-icon="el-icon-search"
          placeholder="关键词">
        </el-input>
      </div>
      <el-table
        v-loading="loading"
        element-loading-text="加载中"
        ref="table"
        :data="courseList"
        style="width: 100%">
        <el-table-column
          prop="id"
          width="80"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="name"
          label="课程名称">
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间">
          <template slot-scope="scope">
            {{scope.row.create_time | localtime }}
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          label="可见状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.visible"
                       active-text=""
                       inactive-text=""
                       @change="handleVisibleSwitch(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          width="250"
          label="操作">
          <div slot-scope="scope">
            <icon-btn name="编辑" icon="edit" @click.native="goEdit(scope.row.id)"></icon-btn>
            <icon-btn name="资源管理" icon="list-ol" @click.native="goCourseResourceMan(scope.row.id)"></icon-btn>
            <icon-btn name="资源编排" icon="align-justify" @click.native="goCourseResourceArr(scope.row.id)"></icon-btn>
            <icon-btn name="开课" icon="university" @click.native="goClassroomList(scope.row.id)"></icon-btn>
          </div>
        </el-table-column>
      </el-table>
      <div class="panel-options">
        <el-pagination
          class="page"
          layout="prev, pager, next"
          @current-change="currentChange"
          :page-size="pageSize"
          :total="total">
        </el-pagination>
      </div>
    </Panel>
  </div>
</template>

<script>
  import api from '../../api.js'

  export default {
    name: 'CourseList',
    data () {
      return {
        pageSize: 10,
        total: 0,
        courseList: [],
        keyword: '',
        loading: false,
        currentPage: 1,
        currentId: 1
      }
    },
    mounted () {
      this.getCourseList(this.currentPage)
    },
    methods: {
      // 切换页码回调
      currentChange (page) {
        this.currentPage = page
        this.getCourseList(page)
      },
      getCourseList (page) {
        this.loading = true
        api.getCourseList((page - 1) * this.pageSize, this.pageSize, this.keyword).then(res => {
          this.loading = false
          this.total = res.data.data.total
          this.courseList = res.data.data.results
        }, res => {
          this.loading = false
        })
      },
      goEdit (courseId) {
        this.$router.push({name: 'edit-course', params: {courseId}})
      },
      goCourseResourceMan (courseId) {
        this.$router.push({name: 'course-resource-man', params: {courseId}})
      },
      goCourseResourceArr (courseId) {
        this.$router.push({name: 'course-resource-arr', params: {courseId}})
      },
      handleVisibleSwitch (row) {
        api.editCourse(row)
      },
      goCreateClassroom (courseId) {
        this.$router.push({name: 'create-classroom', params: {courseId}})
      },
      goClassroomList (courseId) {
        this.$router.push({name: 'classroom-list', params: {courseId}})
      }
    },
    watch: {
      'keyword' () {
        this.currentChange(1)
      }
    }
  }
</script>
